<template>
  <div class="image page page_padding">
    <NavigateBar
      :forwardTo="`/image/${imageDetail?.iid}/manage`"
      :showForwardButton="checkBelongTo()"
    />
    <transition-group name="slide-fade">
      <h3 class="tips" v-if="imageDetail"># {{ imageDetail?.file?.fname }}</h3>
      <div class="container" v-if="imageDetail">
        <img :src="`${apis.static}/file/${imageDetail?.file?.fencodedMd5}`" alt />
      </div>
    </transition-group>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { apis } from "../api";
import NavigateBar from "../components/NavigateBar.vue";

export default {
  components: { NavigateBar },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.id = to.params.id
    })
  },
  setup() {
    const data = reactive({
      id: null,
      imageDetail: null,
    })

    const checkBelongTo = () => {
      return apis.checkBelongTo(data.imageDetail?.file?.uid)
    }

    const getImageDetail = () => {
      setTimeout(() => {
        if (data.id != null) {
          apis.getImageById(data.id).then(response => {
            data.imageDetail = response.data.result
          })
        }
      })
    }
    getImageDetail()
    return { ...toRefs(data), checkBelongTo, apis }
  }
}
</script>

<style scoped lang="less">
.image {
  min-height: 100vh;
}

.container {
  & img {
    width: 100%;
  }
}
</style>